﻿<!DOCTYPE html >

<html >

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Math Editor</title>
    <link href="assets/css/MathEditor.css" rel="stylesheet" />
    <link href="assets/css/codemirror.css" rel="stylesheet" />
    <link href="assets/js/jquery-easyui/themes/gray/easyui.css" rel="stylesheet" />
    <link href="assets/js/jquery-easyui/themes/icon.css" rel="stylesheet" />
    <link href="assets/js/mathquill/css/mathquill.css" rel="stylesheet" />
    <script src="assets/js/jquery/jquery-1.10.2.js"></script>
    <script src="assets/js/jquery/optimize.js"></script>
    <style>
        input {
            margin-top: .7em
        }
        .output {} .MathJax {
            cursor: pointer;
        }
        #display {
            background: rgb(249, 252, 247);
            /* Old browsers */
            background: -moz-linear-gradient(top, rgba(249, 252, 247, 1) 0%, rgba(245, 249, 240, 1) 100%);
            /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(249, 252, 247, 1)), color-stop(100%, rgba(245, 249, 240, 1)));
            /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, rgba(249, 252, 247, 1) 0%, rgba(245, 249, 240, 1) 100%);
            /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, rgba(249, 252, 247, 1) 0%, rgba(245, 249, 240, 1) 100%);
            /* Opera 11.10+ */
            background: -ms-linear-gradient(top, rgba(249, 252, 247, 1) 0%, rgba(245, 249, 240, 1) 100%);
            /* IE10+ */
            background: linear-gradient(to bottom, rgba(249, 252, 247, 1) 0%, rgba(245, 249, 240, 1) 100%);
            /* W3C */
            filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f9fcf7', endColorstr='#f5f9f0', GradientType=0);
            /* IE6-9 */
        }
        button,
        input[type=button] {
            width: 70px;
            height: 30px;
            background: #1e5799;
            color: white;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover,
        input[type=button]:hover {
            background: rgb(125, 126, 125);
        }
        .panel .combo-p {
            height: auto;
        }
    </style>
</head>

<body>

    <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">
    </script>
	<script type="text/x-mathjax-config">
        MathJax.Hub.Config({ tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]} });
    </script>
    <div>
        <script type="text/x-mathjax-config">
            MathJax.Hub.Config({ "HTML-CSS": { scale: 120} });
        </script>
        <div style="float:left;display:block">
            <div style="border:1px solid gray;border-radius:5px">
                <div id="display" style="overflow:auto;width:500px;height:250px;padding:7px;font-size:18px" contenteditable></div>
            </div>
            <input type="button" onclick="saveMath()" value="Save">
            <input type="button" onclick="editMath()" value="Edit">
            <input type="button" onclick="clearInsert()" value="New">
        </div>
        <script src="assets/js/controlMath.js"></script>
    </div>

    <div class="easyui-layout " id="bodyPage" style="height:660px;width:55%;float:right">

        <div id="WaitMsg" style="margin:10px;padding:10px;height:10px;background-color:#E7F0FF;border:1px dotted #95B8E7;border-top:1px solid #95B8E7; color:#0E2D5F;">
            Editor is downloading...
            <br/>
            <br/>Thank you for your patience.
            <br/>
            <br/>If the editor is not loaded properly in one or two seconds, you can try to find the page by pressing the F5 key.
        </div>
        <div data-options="region:'north', collapsible: false" style="height:35px;background:#eeeeee">

            <button title="Save Formula" data-options="iconCls:'icon-ok',plain:'true'" onclick="passValue(1)">Insert</button>
            <button title="Save Formula" data-options="iconCls:'icon-ok',plain:'true'" onclick="passValue(2)">DinhThuc</button>
            <button title="Save Formula" data-options="iconCls:'icon-ok',plain:'true'" onclick="passValue(3)">HePT</button>

        </div>
		
        <div data-options="region:'east',title:'Formulas',collapsible: true,iconCls:'icon-square_root', border:false" style="width:280px">
			<div id="Formulas"  ></div>	
			<div style=" height:380px">
				<div id="aaFormulas"  class="easyui-accordion" data-options="border: false, fit: true" >
					
					<!-- <div title="<span>$(\ )$ &nbsp;&nbsp; $[\ \ ]$ &nbsp;&nbsp; $| \; |$ </span>" style="overflow:auto;" id="BRACKET_SYMBOLS"></div> 
					<div title="<span>$\leq$ &nbsp;&nbsp; $\cong$ &nbsp;&nbsp; $\approx$</span>" data-options="border: false" style="overflow:auto" id="RELATION_SYMBOLS"></div>
					<div title="<span>$\varepsilon$ &nbsp;&nbsp; $\pi$  &nbsp;&nbsp; $\Psi$ </span>" style="overflow:auto;" id="L_U_GREEK_CHAR_Filter"></div>-->
					<div title="<span><img src='assets/images/matrix.gif'  width='20' height='20'  /> </span>" style="overflow:auto;padding:10px" id="MATRIX_SYMBOLS"></div>
					<div title="<span>$\Rightarrow$ &nbsp;&nbsp; $\circlearrowleft$ &nbsp;&nbsp; $\looparrowright$</span>" style="overflow:auto;" id="ARROW_SYMBOLS"></div>
					<div title="<span style='font-size:70%;'>$\int$ &nbsp;&nbsp; $\sum$ &nbsp;&nbsp; $\prod$ </span>" style="overflow:auto;" id="INTEGRAL_SYMBOLS"></div>
					<div title="<span>$\ln$ &nbsp;&nbsp; $\cos$ &nbsp;&nbsp; $\lim$ </span>" style="overflow:auto;" id="FONCTION_SYMBOLS"></div>
					<div title="<span>$\pm$ &nbsp;&nbsp; $\times$  &nbsp;&nbsp; $\div$</span>" data-options="border: false" style="overflow:auto;padding:10px" id="OPERATOR_SYMBOLS"></div>
					<div title="<span>More </span>" style="overflow:auto;" id="L_U_GREEK_CHAR"></div>
					
				</div>
			</div>
        </div>
        <div data-options="region:'center'">
            <div class="easyui-layout" data-options="fit:true">
                <div data-options="region:'center',fit:true">
                    <div class="easyui-layout" data-options="fit:true">
                        <div data-options="region:'center'">
                            <div data-options="fit:true, tabPosition:'bottom'" class="easyui-tabs">
                                <div id="editable-math" class="mathquill-editable" title="Editor"></div>
								<!--<div style="display:" id="latex-title" title="LaTex">
									<textarea style="display:" id="latex-source"></textarea>
								</div> !-->
                            </div>
							
                        </div>
                        <div data-options="region:'west'" style="width:70px;background:#f3f3f3;text-align:center;padding-top: 10px;">
                            <!-- 
							<a href="#" class="easyui-linkbutton easyui-tooltip" title="Plus-Minus" data-options="plain:'true',position:'right'"  onclick="javascript:matheditor.insert('\\pm ')" >$\pm$</a>
							<a href="#" class="easyui-linkbutton easyui-tooltip" title="Plus" data-options="plain:'true',position:'right'"  onclick="javascript:matheditor.insert('+ ')" >$+$</a>
                            <a href="#" class="easyui-linkbutton easyui-tooltip" title="Minus" data-options="plain:'true',position:'right'"  onclick="javascript:matheditor.insert('- ')" >$-$</a> 
							 <a href="#" class="easyui-linkbutton easyui-tooltip" title="Equals" data-options="plain:'true',position:'right'" onclick="javascript:matheditor.insert('= ')" >$=$</a>
							 <a href="#" class="easyui-linkbutton easyui-tooltip" title="Times" data-options="plain:'true',position:'right'"  onclick="javascript:matheditor.insert('\\times ')" >$\times$</a>
                            <a href="#" class="easyui-linkbutton easyui-tooltip" title="Division" data-options="plain:'true',position:'right'"  onclick="javascript:matheditor.insert('\\div ')" >$\div$</a>-->
                            <a href="#" class="easyui-linkbutton easyui-tooltip" title="shift+'|'" data-options="plain:'true',position:'right'" onclick="javascript:matheditor.tag('\\left|','\\right|')">$\left|□\right|$</a>
                            <a href="#" class="easyui-linkbutton easyui-tooltip" title="shift+'{'" data-options="plain:'true',position:'right'" onclick="javascript:matheditor.tag('\\left\\{','\\right\\}')">$\left\{□\right\}$</a>
                            <a href="#" class="easyui-linkbutton easyui-tooltip" title="'['" data-options="plain:'true',position:'right'" onclick="javascript:matheditor.tag('\\left[','\\right]')">$\left[□\right]$</a>
                            <a href="#" class="easyui-linkbutton easyui-tooltip" title="shift+'9'" data-options="plain:'true',position:'right'" onclick="javascript:matheditor.tag('\\left(','\\right)')">$\left(□\right)$</a> 
                            <a href="#" class="easyui-linkbutton easyui-tooltip" title="Square Root" data-options="plain:'true',position:'right'" onclick="javascript:matheditor.insert('\\sqrt{ } ')">$\sqrt{□}$</a>
                            <a href="#" class="easyui-linkbutton easyui-tooltip" title="Nth Root" data-options="plain:'true',position:'right'" onclick="javascript:matheditor.insert('\\sqrt[n]{ } ')">$\sqrt[n]{□}$</a>
                            <a href="#" class="easyui-linkbutton easyui-tooltip" title="Fraction" data-options="plain:'true',position:'right'" onclick="javascript:matheditor.insert('\\frac{ }{ } ')">$\frac{□}{□}$</a>
                            
							
							<a href="#" class="easyui-linkbutton easyui-tooltip" title="shift+'^'" data-options="plain:'true',position:'right'" onclick="javascript:matheditor.insert('\\^{ } ')">$□^{□}$</a>
                            <a href="#" class="easyui-linkbutton easyui-tooltip" title="shift+'_'" data-options="plain:'true',position:'right'" onclick="javascript:matheditor.insert('_{ } ')">$□_{□}$</a>
                            <a href="#" class="easyui-linkbutton easyui-tooltip" title="shift+'^'" data-options="plain:'true',position:'right'" onclick="javascript:matheditor.insert('^{ }_{ } ')">$□^{□}_{□}$</a>
                            <a href="#" class="easyui-linkbutton easyui-tooltip " title="Vector" data-options="plain:'true',position:'right'" onclick="javascript:matheditor.insert('\\vec{} ')">$\vec{□}$</a>
                            <a href="#" class="easyui-linkbutton easyui-tooltip " title="Bar" data-options="plain:'true',position:'right'" onclick="javascript:matheditor.insert('\\bar{} ')">$\bar{□}$</a>
                            <a href="#" class="easyui-linkbutton easyui-tooltip " title="Vector" data-options="plain:'true',position:'right'" onclick="javascript:matheditor.insert('\\widetilde{} ')">$\widetilde{□}$</a>
                            <a href="#" class="easyui-linkbutton easyui-tooltip " title="Vector" data-options="plain:'true',position:'right'" onclick="javascript:matheditor.insert('\\widehat{} ')">$\widehat{□}$</a>
                            <div class="menu-sep"></div>
                            <a href="#" class="easyui-linkbutton easyui-tooltip " title="Sum" data-options="plain:'true',position:'right'" onclick="javascript:matheditor.insert('\\sum^{ }_{ } ')">$\sum^{□}_{□}$</a>
                            <a href="#" class="easyui-linkbutton easyui-tooltip " title="Int" data-options="plain:'true',position:'right'" onclick="javascript:matheditor.insert('\\int^{ }_{ } ')">$\int^{□}_{□}$</a>
							<a href="#" class="easyui-linkbutton easyui-tooltip" title="" data-options="plain:'true',position:'right'" onclick="javascript:matheditor.insert('\\xrightarrow{ }{ } ')">$\xrightarrow[□]{□}$</a>
							
					   </div>
                    </div>

                </div>
            </div>
        </div>
        <div data-options="region:'south'" style="text-align:right; padding: 5px 5px 0px 0px; height:35px; background-color:#f3f3f3">
            <div style="display:none" id="latex-title" title="LaTex">
									<textarea style="display:" id="latex-source"></textarea>
								</div>
        </div>

        <script src="assets/js/jquery-easyui/jquery.easyui.min.js"></script>
        <script src="assets/js/mathquill/mathquill.js"></script>
        <script src="assets/js/MathEditor.js"></script>

        <!--        <script src="http://codemirror.net/lib/codemirror.js"></script>   
        <script type="text/javascript">
            //var editor = CodeMirror.fromTextArea(document.getElementById("latex-source"), {
            //    lineNumbers: true,
            //    matchBrackets: true
            //});
        </script>   -->
    </div>



</body>

</html>
